<template>
  <div>
    <el-upload
      class="upload"
      ref="upload"
      action
      :auto-upload="false"
      :file-list="fileList"
      :show-file-list="showFileList"
      :before-remove="beforeRemove"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template slot="default">
        <template v-if="isCustomTrigger">
          <slot name="trigger_btn"> </slot>
        </template>
        <template v-else>
          <el-button size="small" type="primary">上传文件</el-button>
        </template>
      </template>
      <!-- <template v-slot:trigger>
      <el-button size="small" type="primary">上传文件</el-button>
     </template> -->
      <!-- <div slot="tip" class="upload-tip">只能上传pdf文件</div> -->

      <div slot="file" slot-scope="{ file }">
        <li class="el-upload-list__item is-success">
          <a
            @click="() => handlePreview(file)"
            class="el-upload-list__item-name"
          >
            <i class="el-icon-document"></i>{{ file.name }}
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-circle-check"></i>
          </label>
          <i @click.stop="removeChange(file)" class="el-icon-close"></i>
        </li>
      </div>
    </el-upload>
    <div>
      <viewer :images="images">
        <img v-for="src in images" :key="src" :src="src" />
      </viewer>
    </div>
  </div>

  <!-- <div class="file-list">
      <div class="file" v-for="(file, index) in fileList" :key="index">
        <a :href="file.url" target="_blank">{{ file.name }}</a>
      </div>
    </div> -->
</template>

<script>
import { uploading } from "@/page/material/common/common";

export default {
  name: "UploadFile",
  data() {
    return {
      fileList: [],
      images: [],
    };
  },
  props: {
    files: {
      type: Array,
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    /**
     * 自定义key值
     * 默认[{name:'',url:''}]
     */
    dataProp: {
      type: Object,
      default: () => {
        return {
          name_key: "name",
          url_key: "url",
        };
      },
    },
    isCustomTrigger: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // this.fileList = this.files.map(item => { return { name: item[this.dataProp.name_key], url: item[this.dataProp.url_key] }; });
    // const unWatch = this.$watch("files", (newVal, oldVal) => {
    //   this.fileList = this.files && this.files.map(item => { return { name: item[this.dataProp.name_key], url: item[this.dataProp.url_key] }; });
    //   unWatch(); // 取消监听
    // });
  },
  watch: {
    files: {
      handler: function (newValue, oldValue) {
        if (this.files) {
          this.fileList = this.files.map((item) => {
            return {
              name: item[this.dataProp.name_key],
              url: item[this.dataProp.url_key],
            };
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除吗？`);
    },

    handleRemove(file, fileList) {
      // const index = this.ruleForm.files.findIndex(
      //     (item) => item.uid === file.uid
      // );
      // index > -1 && this.ruleForm.files.splice(index, 1);
      const index = this.fileList.findIndex((item) => item.uid === file.uid);
      index > -1 && this.fileList.splice(index, 1);
      this.$emit("update:files", [...this.transformFileList(this.fileList)]);
    },
    handlePreview(file) {
      // console.log(file, "filefjalksdjf llf ")
      const regex = /\.(jpg|png|webp|jpeg)$/i;
      if (regex.test(file.url)) {
        this.$viewerApi({
          images: [file.url],
        });
      } else {
        window.open(file.url);
      }
    },
    // 图片上传功能
    handleChange(file, fileList) {
      var raw = file.raw; //文件
      var filename = raw.uid + raw.name; //通过 uid和name组成文件的名字
      uploading(raw, filename, "qms").then((res) => {
        this.fileList = [
          ...this.fileList,
          { name: file.raw.name, url: res.res.requestUrls[0] },
        ];
        this.$emit("update:files", [...this.transformFileList(this.fileList)]);
      });
    },
    removeChange(file) {
      const index = this.fileList.findIndex((item) => item.uid === file.uid);
      index > -1 && this.fileList.splice(index, 1);
      this.$emit("update:files", [...this.transformFileList(this.fileList)]);
    },
    transformFileList() {
      return this.fileList.map((item) => {
        return {
          [this.dataProp.name_key]: item.name,
          [this.dataProp.url_key]: item.url,
        };
      });
    },
  },
};
</script>

<style scoped></style>